<template>
  <div class="login">
    <van-nav-bar left-arrow @click-left="$router.back()" />
    <div class="logoBox">
      <img src="https://wap.lexuemiao.com/img/logo@2x.a4702f31.png" alt="" />
    </div>
    <van-cell-group inset class="form">
      <van-field
        v-model="loginParams.mobile"
        center
        clearable
        left-icon=""
        placeholder="请输手机号"
        @input="jy"
      >
        <template #button>
          <van-button
            type="warning"
            :disabled="send"
            @click="start"
            size="mini"
          >
            <span v-if="send == false">发送验证码</span>
            <van-count-down
              :time="time"
              format="获取验证码(ss)"
              v-else
              @finish="finish"
            />
          </van-button>
        </template>
      </van-field>
      <van-field
        v-model="loginParams.sms_code"
        left-icon=""
        placeholder="请输入验证码"
      />
      <van-field
        v-model="loginParams.captcha"
        center
        clearable
        left-icon=""
        placeholder="请输验证码"
      >
        <template #right-icon>
          <img class="imgCode" :src="tuImg?.img" alt="" @click="getImg" />
        </template>
      </van-field>
    </van-cell-group>

    <div class="btnbox">
      <van-button
        class="btn"
        size="normal"
        color="#f15a24"
        type="primary"
        @click="LOgin"
        >登录</van-button
      >
    </div>
    <div class="tishi">
      <p>未注册的手机号码将自动注册</p>
      <p @click="toLogin">密码登录</p>
    </div>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getImgCodeApi, getZCApi, getLoginApi } from '../http/api.js'
import { useCounterStore } from '@/stores/counter'
import { Toast } from 'vant'
export default {
  setup(props) {
    const store = useCounterStore()
    const router = useRouter()
    const data = reactive({
      loginParams: {
        mobile: '', //手机号
        sms_code: '', //手机验证码
        captcha: '' //图片验证码
      },
      tuImg: '',
      send: false,
      time: 10 * 1000
    })
    onMounted(() => {
      getImg()
    })
    // 去登录
    const toLogin = () => {
      router.push('/login')
    }
    // 图片请求
    const getImg = async () => {
      const res = await getImgCodeApi()
      console.log('图片', res)
      data.tuImg = res.url
    }
    // 倒计时结束
    const finish = () => {
      data.send = false
      data.time = 10 * 1000
    }
    // 校验手机号是否正确输入
    const jy = () => {
      if (data.loginParams.mobile == '') {
        Toast.error('手机号码不能为空哦!')
        return false
      }
      let sj = /^1[3-9][0-9]{9}$/
      if (!sj.test(data.loginParams.mobile)) {
        Toast.fail('手机号码格式不正确哦!')
        return false
      }
    }
    // 发送验证码
    const start = async () => {
      if (data.loginParams.mobile == '') {
        Toast.fail('手机号码不能为空哦!')
        return false
      }
      let sj = /^1[3-9][0-9]{9}$/
      if (!sj.test(data.loginParams.mobile)) {
        Toast.fail('手机号码格式不正确哦!')
        return false
      }
      data.send = true
      let obj = {
        mobile: data.loginParams.mobile,
        sms_type: 'login'
      }
      const res = await getZCApi(obj)
      console.log('手机号发送过来的验证码', res)
    }
    // 登录 注册
    const LOgin = async () => {
      if (data.loginParams.captcha == '') {
        Toast.fail('图形验证码不能为空哦!')
        return false
      }
      let obj = {
        mobile: data.loginParams.mobile, //手机号
        sms_code: data.loginParams.sms_code, //手机验证码
        captcha: data.loginParams.captcha, //图片验证码
        user_pass: '000000', //用户初始密码 默认
        device_type: 2 //设备号 默认
      }
      const res = await getLoginApi(obj)
      console.log('登录返回', res)
      store.addToken(res)
      // 登录成功后判断 is_new_user为1为新用户 为0为老用户
      // 新用户 进入设置密码页面 老用户直接进入我的页面
      if (res.is_new_user == 0) {
        router.push('/my')
      } else {
        router.push(
          `/CZmm?mobile=${data.loginParams.mobile}&sms_code=${data.loginParams.sms_code}`
        )
      }
      data.loginParams = {
        mobile: '', //手机号
        sms_code: '', //手机验证码
        captcha: '' //图片验证码
      }
    }
    return {
      ...toRefs(data),
      toLogin,
      getImg,
      finish,
      start,
      LOgin,
      jy
    }
  }
}
</script>
<style lang="scss" scoped>
.logoBox {
  padding-top: 100px;
  img {
    display: block;
    margin: auto;
    width: 340px;
    height: 110px;
    margin-bottom: 100px;
  }
}
.form {
  img {
    width: 180px;
    height: 60px;
  }
}
.btnbox {
  margin-top: 80px;
  padding: 0 40px;
  box-sizing: border-box;
  .btn {
    width: 100%;
  }
}
.tishi {
  display: flex;
  justify-content: space-between;
  padding: 20px 60px;
  font-size: 12px;
  color: #ccc;
}
</style>
